<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->

    <TodoHeader
      @addTask="addTaskFn"
      :list="list"
      @checkAll="checkAll"
    ></TodoHeader>
    <TodoMain :list="ShowList" @del="delFn" @change="changeFn"></TodoMain
    ><!-- 子组件触发点击函数 父组件要创建一个自定义函数 -->
    <TodoFooter
      :list="list"
      @clear="clearFn"
      :type="type"
      @changeType="changeTypeFn"
    ></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import './styles/base.css'
import './styles/index.css'

import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'

export default {
  methods: {
    //储存函数的地方
    delFn(id) {
      // 子组件传过来的是实参 父组件要有一个形参接收

      console.log('触发了delFn', id)
      // 删除对应元素 用filter方法筛选  筛选每一项  留下满足条件的
      // 当我点击之后  留下没被点击的  过滤我点击的那个 因为它的id值等于我点击的id
      this.list = this.list.filter((item) => item.id !== id)
    },
    //
    addTaskFn(task) {
      console.log('出发了addTask事件', task)
      this.list.push({
        id: this.list.length ? this.list.at(-1).id + 1 : 100, //如果这个数组的长度还有 那么就取这个数组的最后一项的id+1 如果没了 就变成100
        name: task, //名字就是传过来的task
        isDone: false, //刚开始一般是没完成的 我们设置false就好了
      })
    },
    //
    changeFn(id) {
      console.log(id)
      // find只返回第一个满足条件的
      const res = this.list.find((item) => item.id === id)
      console.log(res)
      // 因为res已经是一个实例化对象了 所以不用this
      // 把res这个对象里面的item属性取它的反值
      res.isDone = !res.isDone
    },
    //
    clearFn() {
      console.log('触发了')
      // 把这个数组变成
      // 留下数组里的每一项isDone属性为false的item  清除已完成就是留下未完成
      this.list = this.list.filter((item) => item.isDone === false)
    },
    //
    changeTypeFn(type) {
      this.type = type
    },
    //
    // 设置形参接收实参
    checkAll(val) {
      console.log('checkAll', val)
      this.list.filter((item) => (item.isDone = val))
    },
  },
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      // list: [
      //   { id: 100, name: '吃饭', isDone: true },
      //   { id: 101, name: '睡觉', isDone: false },
      //   { id: 102, name: '打豆豆', isDone: true },
      // ],//已经不能写死了
      //因为要获取本地数据  但数据是字符串 要转换成数组才可以    
      list: JSON.parse(localStorage.getItem('todolist')) || [],
      // 用户可能直接敲回车 那我们就传个空数组就好了
      type: 'all',
      // all是全选  yes是已完成 no是未完成
    }
  },
  //计算属性
  computed: {
    // 多个数据影响一个
    ShowList() {
      if (this.type === 'yes') {
        return this.list.filter((item) => item.isDone === true)
      } else if (this.type === 'no') {
        return this.list.filter((item) => item.isDone === false)
      } else {
        return this.list
      }
      // 如果type属性是yes 我们就返回已完成的item 如果是false 我们就返回没完成的<item></item>  否则返回全部list
    },
  },
  //
  watch: {
    list: {
      // 深度监听
      deep: true,
      handler(newval) {
        //本地存进去的是数组 数组不会被是识别 要转换格式变成字符串
        localStorage.setItem('todolist', JSON.stringify(newval))
      },
    },
  },
}
</script>
